<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>馫时光-订单状态</title>
    <link type="text/css" rel="stylesheet" href="../statics/style/search.css" />
    <script type="text/javascript" src="../statics/js/jquery-3.1.1.min.js"></script>
</head>
<body>
    <div id="container">
        <div class="header-search-btn">
            <a href="" class="link">
                <div class="icon">
                    <img src="../statics/img/search.png" alt="">
                </div>
                <div class="txt">支持首字母搜索</div>
            </a>
        </div>
        <div class="product">
            <div class="cate">
                <ul>
                    <li class="active">推荐</li>
                    <li>净菜</li>
                    <li>蔬菜</li>
                    <li>水果</li>
                    <li>肉类</li>
                    <li>禽蛋</li>
                    <li>水产</li>
                    <li>点心速食</li>
                    <li>乳饮西点</li>
                    <li>粮油辅食</li>
                </ul>
            </div>
            <div class="list">
                <dl>
                    <dt>馫时精选</dt>
                    <dd>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.1.jpg" alt="馫">
                                </div>
                                <div class="title">本周特惠</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.2.jpg" alt="馫">
                                </div>
                                <div class="title">本周新菜</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.3.jpg" alt="馫">
                                </div>
                                <div class="title">时令蔬果</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.3.jpg" alt="馫">
                                </div>
                                <div class="title">新鲜乳品</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.2.jpg" alt="馫">
                                </div>
                                <div class="title">新鲜活杀鱼</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.1.jpg" alt="馫">
                                </div>
                                <div class="title">冷鲜冻肉</div>
                            </a>
                        </li>
                    </dd>
                </dl>
                <dl>
                    <dt>品牌专区</dt>
                    <dd>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.1.jpg" alt="馫">
                                </div>
                                <div class="title">本周特惠</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.2.jpg" alt="馫">
                                </div>
                                <div class="title">本周新菜</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.3.jpg" alt="馫">
                                </div>
                                <div class="title">时令蔬果</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.3.jpg" alt="馫">
                                </div>
                                <div class="title">新鲜乳品</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.2.jpg" alt="馫">
                                </div>
                                <div class="title">新鲜活杀鱼</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.1.jpg" alt="馫">
                                </div>
                                <div class="title">冷鲜冻肉</div>
                            </a>
                        </li>
                    </dd>
                </dl>
                <dl>
                    <dt>免邮速递</dt>
                    <dd>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.1.jpg" alt="馫">
                                </div>
                                <div class="title">本周特惠</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.2.jpg" alt="馫">
                                </div>
                                <div class="title">本周新菜</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.3.jpg" alt="馫">
                                </div>
                                <div class="title">时令蔬果</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.3.jpg" alt="馫">
                                </div>
                                <div class="title">新鲜乳品</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.2.jpg" alt="馫">
                                </div>
                                <div class="title">新鲜活杀鱼</div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="img">
                                    <img src="../statics/images/meat.1.jpg" alt="馫">
                                </div>
                                <div class="title">冷鲜冻肉</div>
                            </a>
                        </li>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            var vegetables = [
                { title:'时令蔬菜', img:'vegetables.1.jpg' },
                { title:'叶菜类',   img:'vegetables.2.jpg' },
                { title:'茄果类',   img:'vegetables.3.jpg' },
                { title:'根茎类',   img:'vegetables.4.jpg' },
                { title:'菌菇类',   img:'vegetables.5.jpg' },
                { title:'净菜类',   img:'vegetables.6.jpg' },
                { title:'豆制品',   img:'vegetables.7.jpg' },
                { title:'冷冻蔬菜', img:'vegetables.3.jpg' },
                { title:'即食蔬菜', img:'vegetables.5.jpg' }
            ];
            var waters = [
                { title:'淡水鱼',     img:'fish.1.jpg' },
                { title:'海水鱼',     img:'fish.2.jpg' },
                { title:'冷鲜水产',   img:'fish.3.jpg' },
                { title:'鲜活水产',   img:'fish.4.jpg' },
                { title:'虾蟹类',     img:'xia.1.jpg' },
                { title:'贝壳类',     img:'xia.2.jpg' },
                { title:'软体水产',   img:'xia.3.jpg' },
                { title:'刺身即食',   img:'fish.3.jpg' },
                { title:'水产干活',   img:'xia.2.jpg' }
            ];
            var vegetable = '';
            var water = '';
            vegetable +='<div class="recommend"><a href="">'
                      + '<img src="../statics/images/banner.jpg" alt=""></a></div><div class="sub_cate"><ul>';
            for(var i = 0; i < vegetables.length; ++i) {
                vegetable += '<li><a href=""><div class="img">'
                    + '<img src="../statics/images/'+ vegetables[i].img +'" alt="馫"></div>'
                    + '<div class="title">'+ vegetables[i].title +'</div></a></li>';
            }
            vegetable += '</ul></div>';
            water += '<div class="recommend"><a href="">'
                  + '<img src="../statics/images/banner.jpg" alt=""></a></div><div class="sub_cate"><ul>';
            for(var i = 0; i < waters.length; ++i) {
                water += '<li><a href=""><div class="img">'
                    + '<img src="../statics/images/'+ waters[i].img +'" alt="馫"></div>'
                    + '<div class="title">'+ waters[i].title +'</div></a></li>';
            }
            water += '</ul></div>';
            $(".cate li").click(function () {
                var cate = $(this).text();
                $(this).addClass('active').siblings('li').removeClass('active');
                removeSubcate();
                if(parseInt($(this).index()) % 2) {
                    $(".product .list").append(vegetable);
                } else {
                    $(".product .list").append(water);
                }
            })
        });
        
        function removeSubcate() {
            $(".product .list").empty();
        }
    </script>
</body>
</html>